<template>
    <h1>登录{{ setting.title }}</h1>
    <a-form :model="user" ref="formRef" :border="false" :rules="rules" :wrapper-col="wrapperCol">
        <a-form-item name="username" required>
            <a-input placeholder="用户名：swx" v-model:value="user.username">
                <template #prefix>
                    <UserOutlined />
                </template>
            </a-input>
        </a-form-item>

        <a-form-item name="password" required>
            <a-input-password @keyup.enter="doLogin" placeholder="密码：123456" v-model:value="user.password">
                <template #prefix>
                    <LockOutlined />
                </template>
            </a-input-password>
        </a-form-item>

        <a-form-item>
            <a-form-item name="remember" no-style>
                <a-checkbox v-model:checked="user.remember">记住密码</a-checkbox>
            </a-form-item>
            <a class="login-form-forgot" href="">忘记密码</a>
        </a-form-item>

        <a-form-item>
            <a-button style="width: 100%;" :loading="loading" type="primary" @click="doLogin" :disabled="disabled">
                登录
            </a-button>
        </a-form-item>
        <a-form-item>
            <a-button ghost style="width: 100%;color: #8c8c8c;" @click="doRegister">
                注册账号
            </a-button>
        </a-form-item>
    </a-form>
</template>
<script setup>
import { computed, ref } from 'vue';
import { message } from 'ant-design-vue';
import useUserStore from "@/stores/models/user";
import router from "@/router";
import setting from '@/setting';

const loading = ref(false);
const userStore = useUserStore();
const user = ref({
    username: 'test1',
    password: '123456',
    remember: true,
});
const wrapperCol = {
    span: 22,
};
const disabled = computed(() => {
    return !(user.value.username && user.value.password);
});

//登录逻辑
const doLogin = () => {
    formRef.value
        .validate()
        .then(async () => {
            try {
                loading.value = true;
                await userStore.handlerLogin(user.value);
                loading.value = false;
                message.success("登录成功！");
                router.push('/')
            } catch (error) {
                loading.value = false;
            }
        });
}

//注册逻辑
const doRegister = () => {
    router.push('/register')
}


//表单验证
const formRef = ref();
const rules = ref({
    username: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'change',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'change',
        },
    ],
})
</script>
<style scoped lang="scss">
h1 {
    margin-bottom: 40px;
    font-size: 26px;
    color: #333;
}

.login-form-forgot {
    float: right;
}
</style>